<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
	   	<title>创建课程</title>
	    <link href="/static/weike/css/style.css" rel="stylesheet">
	    <script src="/static/weike/js/style.js"></script>
	    <script src="/static/weike/js/pic_deal.js"></script>
	    <script src="/static/js/jquery.js"></script>
	    <script src="/static/lrz/dist/lrz.bundle.js"></script>
	</head>
	<body >
		<div class="per_create">
			<article>
				<header>
					<p>课程名称</p>
					<input name="" placeholder="请输入课程名称" id="title" />
					<p>课程介绍</p>
					<textarea placeholder="请输入课程介绍" id="introduce"></textarea>
				</header>
				<article class="art">
					<section><span>开课时间	</span><span></span><span id="beg_time">2017/09/07  23:40</span></section>
					<!--<section><span>课程时长	</span><span></span><span>120分钟			</span></section>-->
					<section><span>课程类型	</span><span></span><span id="room_stype">艺术-设计			</span></section>
					<section><span>收费情况	</span><span></span><span id="room_price">免费				</span></section>
					<section><span>课程封面图</span><span></span><span value="0">请上传750*430尺寸	</span></section>
				</article>
				<aside>
					<p>创建完成后生成专属邀请卡邀请好友来听课</p>
					<div>
						<button onclick="javascript:window.location.href='http://mg.bonayiyou.com/index/home/weike_center.html'">取消创建</button>
						<button class="sure_create" id="create">确认创建</button>
					</div>
				</aside>
			</article>
			<div class="class_begin class_set" >
				<div>
					<header class="time">
						<div>
							<div>
								<ul>
									<li>2015</li>
								</ul>
							</div>
						</div>
						<span>
							/	
						</span>
						<div>
							<div>
								<ul>
									<li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li>
									<li>07</li><li>08</li><li>09</li><li>10</li><li>11</li><li>12</li>
								</ul>
							</div>
						</div>
						<span>
							/	
						</span>
						<div>
							<div>
								<ul>
									<li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li>
									<li>07</li><li>08</li><li>09</li><li>10</li><li>11</li><li>12</li>
									<li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li>
									<li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li>
									<li>25</li><li>26</li><li>27</li><li>28</li>
									<li class="dateclose">29</li><li class="dateclose">30</li><li class="dateclose">31</li>
								</ul>
							</div>
						</div>
						<span>
							&nbsp;
						</span>
						<div>
							<div>
								<ul>
									<li>00</li>
									<li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li>
									<li>07</li><li>08</li><li>09</li><li>10</li><li>11</li><li>12</li>
									<li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li>
									<li>19</li><li>20</li><li>21</li><li>22</li><li>23</li>
								</ul>
							</div>
						</div>
						<span>
							:	
						</span>
						<div>
							<div>
								<ul>
									<li>00</li>
									<li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li>
									<li>07</li><li>08</li><li>09</li><li>10</li><li>11</li><li>12</li>
									<li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li>
									<li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li>
									<li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li>
									<li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li>
									<li>37</li><li>38</li><li>49</li><li>40</li><li>44</li><li>42</li>
									<li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li>
									<li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li>
									<li>55</li><li>56</li><li>57</li><li>58</li><li>59</li>
								</ul>
							</div>
						</div>
					</header>
					<article class="per_choose" >
						<div>
							<header>年</header>
							<div>
								<ul>
									<li>2015</li>
								</ul>
							</div>
						</div>
						<div>
							<header>月</header>
							<div>
								<ul>
									<li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li>
									<li>07</li><li>08</li><li>09</li><li>10</li><li>11</li><li>12</li>
								</ul>
							</div>
						</div>
						<div>
							<header>日</header>
							<div>
								<ul>
									<li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li>
									<li>07</li><li>08</li><li>09</li><li>10</li><li>11</li><li>12</li>
									<li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li>
									<li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li>
									<li>25</li><li>26</li><li>27</li><li>28</li>
									<li class="dateclose">29</li><li class="dateclose">30</li><li class="dateclose">31</li>
								</ul>
							</div>
						</div>
						<div>
							<header>时</header>
							<div>
								<ul>
									<li>00</li>
									<li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li>
									<li>07</li><li>08</li><li>09</li><li>10</li><li>11</li><li>12</li>
									<li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li>
									<li>19</li><li>20</li><li>21</li><li>22</li><li>23</li>
								</ul>
							</div>
						</div>
						<div>
							<header>分</header>
							<div>
								<ul>
									<li>00</li>
									<li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li>
									<li>07</li><li>08</li><li>09</li><li>10</li><li>11</li><li>12</li>
									<li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li>
									<li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li>
									<li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li>
									<li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li>
									<li>37</li><li>38</li><li>49</li><li>40</li><li>44</li><li>42</li>
									<li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li>
									<li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li>
									<li>55</li><li>56</li><li>57</li><li>58</li><li>59</li>
								</ul>
							</div>
						</div>
					</article>
					<footer class="footer">
						<div>取消</div><div>现在</div><div>确认</div>
					</footer>
				</div>
			</div>
			<div class="class_long class_set">
				<div>
					<header>课程时长</header>
					<article>
						<input value="120" type="number" /><span>分钟</span>
					</article>
					<aside>
						1.课程状态将会在达到设置课程时长后转变为结束状态;<br />
						2.结束状态的课程，讲师依然可以继续授课；<br />
						3.课程时长默认为120分钟。
					</aside>
					<div>
						<button>取消</button>
						<button>确定</button>
					</div>
				</div>
			</div>
			<div class="class_type">
				<header>选择课程分类</header>
				<article>
				    {volist name="room_stype" id="vo"}   
					<section>
						<input /><span>{$vo.name}</span><span></span>
					</section>
				    {/volist}
				</article>
				<button class="sure">确认</button>
			</div>
			<div class="class_t_pay">
				<p>选择收费情况</p>
				<article>
					<div>
						<input type="radio" name="open" checked="checked" class="nomoney" />
						<div>
							<div >
								<div class="open"></div>
							</div>
							<p >公开课程</p>
						</div>
						<div class="open">
							所有人都可以免费收听您的课程
						</div>
					</div>
					<div>
						<input type="radio" name="open" class="hasmoney" />
						<div>
							<div>
								<div class="pay"></div>
							</div>
							<p>付费课程</p>
						</div>
						<div class="pay" >
							<input value="" type="text" onkeyup="value=value.replace(/[^\d\.]/g,'')" placeholder="请输入收费金额" class="receive" /><span>元</span>
						</div>
					</div>
				</article>
				<div>
					<input type="checkbox"  checked="checked" class="judge" />
					<span>您已阅读</span><span class="yuedu_conect">《福乐家微课消费者保护协议》</span>
				</div>
				<div>
					<button class="return">返回</button>
					<button class="sure">下一步</button>
				</div>
			</div>
			<div class="file_face">
				<article>
					<aside>
						<img src="/static/weike/img/wk_img_ke.jpg" class="press" id="img" />
					</aside> 
					<div class="choose">
						<div><!--
							<video></video>
							<input type="file" capture="camera" accept="image/*"/>-->
							<span>拍照</span><span></span>
						</div>
						<!--<div>
							<input type="file" accept="image/*"/>
							<span>照片图库</span><span></span>
						</div>-->
						<div class="input_file">
							<section class="show">
								<input type="file" name="0" accept="image/*" />
								<input type="text" id="cover" style="display:none">
								<canvas class="input_canvas"></canvas>
								<span>照片图库</span><span></span>
							</section>
						</div>
					</div>
					<div class="return">
						完成
					</div>
				</article>
			</div>
			<div class="user_yuedu">
				<header><div class="ben_close" style="display: block;"><span></span></div></header>
				<div id="xieyi">
					<!--此处放置协议内容
						-->
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
	document.getElementById('xieyi').innerHTML = '{$content}';
   $("#create").on('click',function()
   {
   var data={};
   if(!$("#title").val())
   {
       alert("课程标题未填");
       exit(0);
   }
   if(!$("#introduce").val())
   {
       alert("课程介绍未填");
       exit(0);
   }
   if(!$("#room_stype").text())
   {
       alert("课程类别未填");
       exit(0);
   }
   if(!$("#cover").val())
   {
       alert("封面图未上传");
       exit(0);
   }   
   if(parseFloat($("#room_price").text())==0)
   {
   	  alert("收费课程价格不能为0");
      exit(0);
   }
   data['title']=$("#title").val();
   data['introduce'] =$("#introduce").val();
   data['beg_time']  =$("#beg_time").text();
   data['room_stype']=$("#room_stype").text();
   data['room_price']=$("#room_price").text();
   data['cover']     =$("#cover").val();
   data['teachername']=$("#teachername").val();
   var url="http://mg.bonayiyou.com/index/home/person_createobj";
   $.post(url,data,function(e){
            if(e.code==1)
            {

            	window.location.href="http://mg.bonayiyou.com/index/home/person_zhibo.html";
            }
            else{
            	alert('创建失败,请重新创建');
            }
			},"JSON");

   });

		//移动端上传图片
    $("input[type=file]").change(function () {
        /* 压缩图片 */
        lrz(this.files[0], {
        	quality:1
            //width: 750 ,//设置压缩参数
        }).then(function (rst) {
            /* 处理成功后执行 */
            rst.formData.append('base64img', rst.base64); // 添加额外参数
            $.ajax({
                url: "/index/home/post_img",
				async:false,
                type: "POST",
                data: rst.formData,
                processData: false,
                contentType: false,
                success: function (data) {
                    $("#cover").attr("value",data);
                    $("#img").attr("src",data);
                    if( $("#img").height()/0.4 < $("#img").width()/0.9){
						$("#img").attr("class","press height");
					}else{
						$("#img").attr("class","press");
					}
                }
            });
        }).catch(function (err) {
            /* 处理失败后执行 */
        }).always(function () {
            /* 必然执行 */
        })
    })	;
    var yuedu_conect = document.getElementsByClassName('yuedu_conect')[0],
		user_yuedu = document.getElementsByClassName("user_yuedu")[0],
		ben_close = user_yuedu.getElementsByClassName("ben_close")[0];
		on(yuedu_conect,"click",function(){
			user_yuedu.style.display='block';
		})
		on(ben_close,"click",function(){
			user_yuedu.style.display='none';
		})
	</script>
</html>
